<template>
  <div class='q-pa-md'>

    <q-btn :label='carDetailData.storeName' color='primary' icon='eco' text-color='white' />
    <q-table
      :columns='columns'
      :filter='filter'
      :loading='loading'
      :rows='rows'
      binary-state-sort
      row-key='id'
      title='Treats'
      @request='onRequest'
    >
      <template v-slot:top-left>
        <div class='row'>
          <div class='col-4' style='min-width: 250px; max-width: 300px' @mouseover='mouseover'>
            <q-select
              v-model='mulSelect.arr'
              filled
              label='选择项'
              multiple
              name='search'
              stack-label
              use-chips
            />
          </div>
          <div class='col-2'>
            <q-btn color='white' icon='search' text-color='black' @click='fetchFromServer' />
          </div>
        </div>

        <div class='q-pt-md row justify-start items-center'>
          <div v-for='(item,index) in searchFrame' :key='index' class='q-px-md'>
            <q-btn-dropdown :label='item.property_name' class='col-4' color='primary'
                            @click='onQueryBar(index+1)'>
              <q-list v-for='item in searchFrameArr' :key='item.markNo'>
                <q-item v-close-popup clickable @click='searchClick(item,index)'>
                  <q-item-section>
                    <q-item-label>
                      {{ item.value }}
                    </q-item-label>
                  </q-item-section>
                </q-item>
              </q-list>
            </q-btn-dropdown>
          </div>
        </div>
      </template>
      <template v-slot:top-right>
        <q-btn color='primary' label='批量增加' @click='batchAddorDelPopup(1)' />
        <q-btn color='primary' label='批量删除' @click='batchAddorDelPopup(2)' />
        <!--        <q-btn v-for='(item,index) in globalOperation' :key='index' color='primary' :label='item' class='control-btn' />-->
      </template>
      <template v-slot:header='props'>
        <q-tr :props='props'>
          <template
            v-for='col in props.cols'
            :key='col.name'
            :props='props'
          >
            <template v-if='col.name == "control"'>
              <q-th align='left' class='sticky-col'>
                {{ col.label }}
              </q-th>
            </template>
            <template v-else>
              <q-th align='left'>
                {{ col.label }}
              </q-th>
            </template>
          </template>
        </q-tr>
      </template>
      <template v-slot:body='props'>
        <q-tr :props='props'>
          <template
            v-for='col in props.cols'
            :key='col.name'
            :props='props'>
            <template v-if='col.name == "control"'>
              <q-td class='sticky-col'>
                <q-btn-dropdown
                  :label='operationFirstSelections'
                  split
                >
                  <q-list v-for='(item, index) in operationSelections' :key='index'>
                    <q-item v-close-popup clickable @click='onItemClick'>
                      <q-item-section>
                        <q-item-label>{{ item }}</q-item-label>
                      </q-item-section>
                    </q-item>
                  </q-list>
                </q-btn-dropdown>
              </q-td>
            </template>
            <template v-else>
              <q-td>
                {{ col.value }}
              </q-td>
            </template>
          </template>
        </q-tr>
      </template>
    </q-table>
  </div>

  <q-dialog v-model='batchAdd' full-width>
    <div class='q-pa-md bg-white'>
      <div class='row'>
        <div class='col-4' style='min-width: 250px; max-width: 300px' @mouseover='mouseover1'>
          <q-select
            v-model='mulSelect1.arr'
            filled
            label='选择项'
            multiple
            name='search'
            stack-label
            use-chips
          />
        </div>
        <div class='col-2'>
          <q-btn color='white' icon='search' text-color='black' @click='fetchFromServer1' />
        </div>
      </div>
      <div class='q-pt-md row justify-start items-center'>
        <div v-for='(item,index) in searchFrame1' :key='index' class='q-px-md'>
          <q-btn-dropdown :label='item.property_name' class='col-4' color='primary'
                          @click='onQueryBar1(index+1,item.property_name)'>
            <q-list v-for='item in searchFrameArr1' :key='item.markNo'>
              <q-item v-close-popup clickable @click='searchClick1(item,index)'>
                <q-item-section>
                  <q-item-label>
                    {{ item.value }}
                  </q-item-label>
                </q-item-section>
              </q-item>
            </q-list>
          </q-btn-dropdown>
        </div>
      </div>
      <br>
      <q-table
        v-model:selected='batchselected'
        :columns='batchcolumns'
        :rows='batchrows'
        :selected-rows-label='getSelectedString'
        row-key='uuid'
        selection='multiple'
        v-model:pagination="pagination1"
        @update:selected='getSelectedFn(batchselected)'
        style="height: 400px"
        :rows-per-page-options="[0]"
      />
<!--      :pagination="initialPagination"-->
      <q-card-actions align='right'>
        <q-btn color='primary' label='确定' @click='batchAddorDelFn' />
        <q-btn v-close-popup color='primary' label='关闭'
               @click='batchselected.length = 0;mulSelect1.arr.length=0;searchFrame1.length = 0;' />
      </q-card-actions>
    </div>
  </q-dialog>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getRequest, postRequest } from 'components/functions';
import { OriginalRows, Pagination, Props, TableColumn } from 'components/models';
import { useStore } from 'src/store';
import { useQuasar } from 'quasar';
import { api } from 'boot/axios';

export default defineComponent({
  name: 'Relevance_carType.vue',
  setup() {
    let rote = useRoute();
    let router = useRouter();
    const store = useStore();
    const $q = useQuasar();
    const pagination = ref<Pagination>({
      sortBy: 'desc',
      descending: false,
      page: 1,
      rowsPerPage: 10,
      rowsNumber: 10
    });
    const queryMenu = 'channel/channel/queryMenu';
    const getInterface = '/channel/channel/getInterface';
    let entityCode = ref<string>('');
    let childCode = ref<string>('');
    const userData = store.state.sphinx.userData;
    let columns = ref<TableColumn[]>();
    const rows = ref([]);
    let fromdataUrl = ref<string>('');
    let QueryBarCode = reactive({ arr: [] });
    let mulSelect = reactive({ arr: [] });
    let searchFrame = ref([]);
    const originalRows = ref<OriginalRows[]>();
    const loading = ref<boolean>(false);
    let carDetailData = store.state.sphinx.CarMessage;
    let cartypeRelation = store.state.sphinx.cartypeRelation;
    let searchFrameArr = ref([]);
    let batchAdd = ref<boolean>(false);
    let batchcolumns = ref([]);
    let batchrows = ref([]);
    let batchselected = ref([]);
    let batchAddorDel = ref<boolean>();
    let batchAddorDelArr = reactive([]);
    let loadingTimer;
    let addorDel = ref<number>(0);

    let searchFrame1 = ref([]);
    let searchFrameArr1 = ref([]);
    let mulSelect1 = reactive({ arr: [] });
    let QueryBarCode1 = reactive({ arr: [] });
    let initialPagination=reactive({
      sortBy: 'desc',
      descending: false,
      page: 2,
      rowsPerPage: 0
    })
    let branchsNumber=ref<number>(0)
    let treadMark = ''
    let carseries = ''
    function getSelectedFn(selected){
      console.log(batchselected.value)
      console.log(mulSelect1.arr.length,branchsNumber.value,selected.length)
      if(mulSelect1.arr.length==0&&(branchsNumber.value==selected.length)){
        batchselected.value.length=0
      }
    }

    //批量增加or删除弹窗显示
    function batchAddorDelPopup(type) {
      batchrows.value.length = 0;

      // 获取批量操作前的查询接口
      let QueryUrl = ref<string>('');
      let resData = {
        entityCode: entityCode.value,
        entityType: cartypeRelation.relationCode,
        theirEventCode: '019' //查询
      };
      if (type == 1) {
        resData.theirEventCode = '019';
        addorDel.value = 1;
      } else {
        resData.theirEventCode = '001';
        addorDel.value = 2;
      }

      // 获取批量增加or删除的车型数据的参数
      let data = {
        companyId: cartypeRelation.companyId,
        theirEntityCode: cartypeRelation.otherEntityCode,
        theirEntityCodeName: cartypeRelation.otherEntityCodeName,
        theirEntityType: cartypeRelation.otherEntityType,
        theirEntityTypeName: cartypeRelation.otherEntityTypeName,

        otherEntityCode: cartypeRelation.entityCode,
        otherEntityCodeName: cartypeRelation.otherEntityCodeName,
        otherEntityType: cartypeRelation.entityType,
        otherEntityTypeName: cartypeRelation.typeName,
        otherEntityNo: carDetailData.storeNo,
        otherEntityNoName: carDetailData.storeName,

        relationCode: cartypeRelation.relationCode,
        relationName: cartypeRelation.relationName,
        eventCode: '001'
      };

      postRequest(getInterface, resData, res => {
        let url = res.data.interfaceEnglish;
        QueryUrl.value = url.substr(url.indexOf('/') + 1);

        //通过查询出来的接口获取批量增加or删除的车型数据
        if (type == 1) {
          batchAddorDel.value = true;
          postRequest(QueryUrl.value, data, res => {
            batchrows.value = res;
            batchAdd.value = true;
            branchsNumber.value=res.length
          });
        } else if (type == 2) {
          batchAddorDel.value = false;
          postRequest(QueryUrl.value, data, res => {
            batchrows.value = res;
            batchAdd.value = true;
            branchsNumber.value=res.length
          });
        }
      });
    }

    //批量增加or删除
    function batchAddorDelFn() {
      batchAddorDelArr.length = 0;
      let newarr = [];
      batchselected.value.forEach(i => {
        newarr.push({ theirEntityNo: i.typeNo, theirEntityNoName: i.typeName });
      });

      // 获取批量操作的接口
      let QueryUrl = ref<string>('');
      let resData = {
        entityCode: entityCode.value,
        entityType: cartypeRelation.relationCode,
        theirEventCode: '' //查询
      };
      if (batchAddorDel.value == true) {
        resData.theirEventCode = '302';
      } else {
        resData.theirEventCode = '303';
      }

      let data = {
        companyId: cartypeRelation.companyId,
        theirEntityCode: cartypeRelation.otherEntityCode,
        theirEntityCodeName: cartypeRelation.otherEntityCodeName,
        theirEntityType: cartypeRelation.otherEntityType,
        theirEntityTypeName: cartypeRelation.otherEntityTypeName,

        otherEntityCode: cartypeRelation.entityCode,
        otherEntityCodeName: cartypeRelation.otherEntityCodeName,
        otherEntityNo: carDetailData.storeNo,
        otherEntityType: cartypeRelation.entityType,
        otherEntityTypeName: cartypeRelation.typeName,
        otherEntityNoName: carDetailData.storeName,

        relationCode: cartypeRelation.relationCode,
        relationName: cartypeRelation.relationName
      };

      newarr.forEach(x => {
        let newobj = {};
        Object.assign(newobj, x, data);
        batchAddorDelArr.push(newobj);
      });

      postRequest(getInterface, resData, res => {
        let url = res.data.interfaceEnglish;
        QueryUrl.value = url.substr(url.indexOf('/') + 1);

        // 通过查询出来的接口批量增加or删除操作
        if (batchAddorDel.value == true) {
          $q.loading.show({
            message: '增加中···'
          });
          postRequest(QueryUrl.value, batchAddorDelArr, res => {
            loadingTimer = setTimeout(() => {
              $q.loading.hide();
              loadingTimer = void 0;
              batchAdd.value = false;
            }, 1000);
            fetchFromServer(null,null,null,null,null)
          });
        } else {
          $q.loading.show({
            message: '删除中···'
          });
          postRequest(QueryUrl.value, batchAddorDelArr, res => {
            loadingTimer = setTimeout(() => {
              $q.loading.hide();
              loadingTimer = void 0;
              batchAdd.value = false;
            }, 1000);
            fetchFromServer(null,null,null,null,null)
          });
        }
        batchselected.value.length = 0;
        mulSelect1.arr.length = 0;
        searchFrame1.value.length = 0;
      });
    }

// 鼠标放在搜索框上出搜索选项
    let a = false;

    function mouseover() {
      if (a) return;
      a = true;
      let resData = {
        companyId: userData.companyId,
        entityCode: cartypeRelation.otherEntityCode,
        entityType: cartypeRelation.otherEntityType,
        sceneCodeType: '101102' + userData.roleType + '103',
        objectCodeType: '107'//代表搜索的代码
      };
      if (searchFrame.value.length == 0) {
        postRequest(queryMenu, resData, (res: []) => {
          searchFrame.value = res;
          a = false;
        });
      }
    }

    // 鼠标放在搜索框上出搜索选项
    function mouseover1() {
      let resData = {
        companyId: userData.companyId,
        entityCode: cartypeRelation.otherEntityCode,
        entityType: cartypeRelation.otherEntityType,
        sceneCodeType: '101102' + userData.roleType + '103',
        objectCodeType: '107'//代表搜索的代码
      };
      if (searchFrame1.value.length == 0) {
        postRequest(queryMenu, resData, (res: []) => {
          searchFrame1.value = res;
        });
      }
    }

    //点击下拉的数据展示在搜索框里
    function searchClick(item: any, index: number) {
      let itemElement = searchFrame.value[index].property_code;
      mulSelect.arr.push(item.value);
      let obj = {};
      obj[itemElement] = item.value;
      QueryBarCode.arr.push(obj);
      mulSelect.arr = Array.from(new Set(mulSelect.arr));
    }

    function searchClick1(item: any, index: number) {
      let itemElement = searchFrame1.value[index].property_code;
      mulSelect1.arr.push(item.value);
      let obj = {};
      obj[itemElement] = item.value;
      QueryBarCode1.arr.push(obj);
      if (itemElement === 'markName') {
        treadMark = item.no;
      } else if (itemElement === 'seriesName') {
        carseries = item.no;
      }
      mulSelect1.arr = Array.from(new Set(mulSelect1.arr));
    }

    // 点击搜索框获取数据
    function onQueryBar(i) {
      //获取搜索数据的接口
      let resData = {
        entityCode: cartypeRelation.otherEntityCode,
        entityType: cartypeRelation.otherEntityType + '1070' + i,
        theirEventCode: '001'
      };
      let QueryBarUrl = ref<string>('');
      postRequest(getInterface, resData, res => {
        let url = res.data.interfaceEnglish;
        QueryBarUrl.value = url.substr(url.indexOf('/') + 1);
      });

      //获取搜索条件
      let resData1 = {
        entityCode: cartypeRelation.otherEntityCode,
        entityType: cartypeRelation.otherEntityType,
        sceneCodeType: '101102' + userData.roleType + '103',
        objectCodeType: '1070' + i
      };
      let QueryBarData = ref({});
      postRequest(queryMenu, resData1, res => {
        res.forEach(i => {
          let obj = {};
          obj[i.property_code] = '';
          QueryBarData.value = obj;
        });
      });

      //获取搜索数据
      searchFrameArr.value = [];
      setTimeout(() => {
        postRequest(QueryBarUrl.value, QueryBarData.value, res => {
          searchFrameArr.value = res;
        });
      }, 1000);
    }

    function onQueryBar1(i,y) {
      //获取搜索数据的接口
      let resData = {
        entityCode: cartypeRelation.otherEntityCode,
        entityType: cartypeRelation.otherEntityType + '1070' + i,
        theirEventCode: '001'
      };
      let QueryBarUrl = ref<string>('');
      postRequest(getInterface, resData, res => {
        let url = res.data.interfaceEnglish;
        QueryBarUrl.value = url.substr(url.indexOf('/') + 1);
      });

      //获取搜索条件
      let resData1 = {
        entityCode: cartypeRelation.otherEntityCode,
        entityType: cartypeRelation.otherEntityType,
        sceneCodeType: '101102' + userData.roleType + '103',
        objectCodeType: '1070' + i
      };
      let QueryBarData = ref({});
      let paramName = ''
      postRequest(queryMenu, resData1, res => {
        res.forEach(i => {
          let obj = {};
          let val = '';
          switch (y) {
            case '车系':
              val = treadMark;
              paramName = 'proCarTrademarkUuid'
              break;
            case '年款':
              val = carseries;
              paramName = 'proCarSeriesUuid'
              break;
            // case '车型':  val = getTypeValue('strleName')  ;break;
          }
          //obj[i.property_code] = val;
          obj[paramName] = val;
          QueryBarData.value = obj;
        });
      });

      //获取搜索数据
      searchFrameArr1.value = [];
      setTimeout(() => {
        getRequest(QueryBarUrl.value, res => {
          searchFrameArr1.value = res;
        },QueryBarData.value);
      }, 1000);
    }


    /**
     * 请求关系首页表头
     */
    function requestColumns() {
      let sceneCode = ''
      let requestSceneBody = [
        {
          "entityCode":'101',
          "codeName":'',
          "entityType":'01',
          "typeName":'',
          "eventCode":null,
          "eventName":null,
          "propertyEnglish":null,
          "propertyChinese":null,
          "propertyValue":null,
          "propertyCondition":null,
          "companyId":userData.companyId
        },
        {
          "entityCode":'102',
          "codeName":'',
          "entityType":'02',
          "typeName":'',
          "eventCode":null,
          "eventName":null,
          "propertyEnglish":'roleType',
          "propertyChinese":null,
          "propertyValue":userData.roleType,
          "propertyCondition":null,
          "companyId":userData.companyId
        }];
      api.post('/channel/channel/getSceneCode',requestSceneBody).then((res)=>{
        if(res.status == 200){
          sceneCode = res.data.data
          let reqData = {
            companyId: userData.companyId,
            entityCode: cartypeRelation.otherEntityCode,
            entityType: cartypeRelation.otherEntityType,
            sceneCode: sceneCode,
            objectCodeType: '102'//关系首页表头
          };
          postRequest(queryMenu, reqData, getColums);
        }
      })
    }

    /**
     * 设置列名
     * @param resultData
     */
    function getColums(resultData: TableColumn[] | any) {
      let newArr = [];
      if (resultData !== undefined && resultData !== null && resultData.length > 0) {
        resultData.forEach(item => {
          newArr.push({ name: item.property_name, label: item.property_name, field: item.property_code });
        });
      }
      columns.value = newArr;
      batchcolumns.value = newArr;

    }

    // 获取请求表内数据的接口
    function getFromdataUrl() {
      let data = {
        entityCode: cartypeRelation.otherEntityCode,
        entityType: '0001',
        theirEventCode: '001' //查询
      };
      postRequest(getInterface, data, res => {
        let url = res.data.interfaceEnglish;
        fromdataUrl.value = url.substr(url.indexOf('/') + 1);
      });
    }

    /**
     * 请求表内数据
     * @param startRow
     * @param count
     * @param filter
     * @param sortBy
     * @param descending
     */
    function fetchFromServer(startRow: number, count: number, filter: string, sortBy: string, descending: boolean) {
      //处理搜索内容的数据
      let newArr = ref([]);
      QueryBarCode.arr.forEach(x => {
        mulSelect.arr.forEach(y => {
          if (y == Object.values(x)[0]) {
            newArr.value.push(x);
          }
        });
      });
      let target = reactive({
        companyId: cartypeRelation.companyId,
        theirEntityCode: cartypeRelation.otherEntityCode,
        theirEntityCodeName: cartypeRelation.otherEntityCodeName,
        theirEntityType: cartypeRelation.otherEntityType,
        theirEntityTypeName: cartypeRelation.otherEntityTypeName,

        otherEntityCode: cartypeRelation.entityCode,
        otherEntityCodeName: cartypeRelation.otherEntityCodeName,
        otherEntityNo: carDetailData.storeNo,
        otherEntityType: cartypeRelation.entityType,
        otherEntityTypeName: cartypeRelation.typeName,
        otherEntityNoName: carDetailData.storeName,

        relationCode: cartypeRelation.relationCode,
        relationName: cartypeRelation.relationName,
        eventCode: '001'
      });

      //带参数查询车型，需另外获取接口
      if (newArr.value.length != 0) {
        let data = {
          entityCode: cartypeRelation.otherEntityCode,
          entityType: cartypeRelation.relationCode + '701',
          theirEventCode: '018' //查询
        };
        newArr.value.forEach(item => {
          Object.assign(target, item);
        });
        postRequest(getInterface, data, res => {
          let url = res.data.interfaceEnglish;
          url = url.substr(url.indexOf('/') + 1);
          postRequest(url, target, data => {
            searchFrame.value.length = 0;
            // mulSelect.arr.length = 0;
            rows.value = data;
          });
        });
      } else {
        // 不带参数查询
        postRequest(fromdataUrl.value, target, (data) => {
          searchFrame.value.length = 0;
          // mulSelect.arr.length = 0;
          rows.value = data;
        });
      }
    }

    function fetchFromServer1(startRow: number, count: number, filter: string, sortBy: string, descending: boolean) {
      console.log(333)
      //处理搜索内容的数据
      let newArr = ref([]);
      QueryBarCode1.arr.forEach(x => {
        mulSelect1.arr.forEach(y => {
          if (y == Object.values(x)[0]) {
            newArr.value.push(x);
          }
        });
      });
      let target = reactive({
        companyId: cartypeRelation.companyId,
        theirEntityCode: cartypeRelation.otherEntityCode,
        theirEntityCodeName: cartypeRelation.otherEntityCodeName,
        theirEntityType: cartypeRelation.otherEntityType,
        theirEntityTypeName: cartypeRelation.otherEntityTypeName,

        otherEntityCode: cartypeRelation.entityCode,
        otherEntityCodeName: cartypeRelation.otherEntityCodeName,
        otherEntityNo: carDetailData.storeNo,
        otherEntityType: cartypeRelation.entityType,
        otherEntityTypeName: cartypeRelation.typeName,
        otherEntityNoName: carDetailData.storeName,

        relationCode: cartypeRelation.relationCode,
        relationName: cartypeRelation.relationName,
        eventCode: '001'
      });

      //带参数查询车型，需另外获取接口
      if (newArr.value.length != 0) {
        let data = {
          entityCode: cartypeRelation.otherEntityCode,
          entityType: cartypeRelation.relationCode + '701',
          theirEventCode: ''
        };
        if (addorDel.value == 1) {
          data.theirEventCode = '019';
        } else if (addorDel.value == 2) {
          data.theirEventCode = '020';
        }
        newArr.value.forEach(item => {
          Object.assign(target, item);
        });
        postRequest(getInterface, data, res => {
          let url = res.data.interfaceEnglish;
          url = url.substr(url.indexOf('/') + 1);
          postRequest(url, target, data => {
            searchFrame1.value.length = 0;
            // mulSelect.arr.length = 0;
            batchrows.value = data;
          });
        });
      } else {
        // 不带参数查询
        postRequest(fromdataUrl.value, target, (data) => {
          searchFrame1.value.length = 0;
          // mulSelect.arr.length = 0;
          batchrows.value = data;
        });
      }
    }

    /**
     * 计算分页
     * @param filter
     */
    function getRowsNumberCount(filter: string): number {
      let count = 0;
      if (originalRows.value !== undefined) {
        if (!filter) {
          return originalRows.value.length;
        }
        originalRows.value.forEach((treat: OriginalRows) => {
          if (treat.name.includes(filter)) {
            ++count;
          }
        });
      }
      return count;
    }

    /**
     * 数据请求
     * @param props
     */
    function onRequest(props: Props) {
      const { page, rowsPerPage, sortBy, descending } = props.pagination;
      const filter = props.filter;
      loading.value = true;
      // emulate server
      setTimeout(() => {
        // update rowsCount with appropriate value
        pagination.value.rowsNumber = getRowsNumberCount(filter);
        // get all rows if "All" (0) is selected
        const fetchCount = rowsPerPage === 0 ? pagination.value.rowsNumber : rowsPerPage;
        // calculate starting row of data
        const startRow = (page - 1) * rowsPerPage;
        // fetch data from "server"
        fetchFromServer(startRow, fetchCount, filter, sortBy, descending);
        // clear out existing data and add new
        // don't forget to update local pagination object
        pagination.value.page = page;
        pagination.value.rowsPerPage = rowsPerPage;
        pagination.value.sortBy = sortBy;
        pagination.value.descending = descending;
        // ...and turn of loading indicator
        loading.value = false;
      }, 1500);
    }

    /**
     * 组合请求
     */
    function requestTableData() {
      requestColumns();
      getFromdataUrl();
      // get initial data from server (1st page)
      onRequest({
        pagination: pagination.value,
        filter: ''
      });
    }

    onMounted(() => {
      entityCode.value = <string>rote.query.entityCode;
      childCode.value = <string>rote.query.childCode;
      requestTableData();
      if (loadingTimer !== void 0) {
        clearTimeout(loadingTimer);
        $q.loading.hide();
      }
    });

    return {
      pagination1: ref({
        rowsPerPage: 0
      }),

      branchsNumber,
      getSelectedFn,
      initialPagination,
      entityCode,
      childCode,
      requestColumns,
      onRequest,
      loading,
      pagination,
      columns,
      rows,
      getFromdataUrl,
      fromdataUrl,
      searchFrame,
      mulSelect,
      fetchFromServer,
      userData,
      carDetailData,
      mouseover,
      cartypeRelation,
      searchFrameArr,
      onQueryBar,
      searchClick,
      batchAdd,
      batchAddorDelPopup,
      batchAddorDelFn,
      batchcolumns,
      batchselected,
      batchrows,
      batchAddorDel,
      batchAddorDelArr,

      searchFrame1,
      searchFrameArr1,
      mouseover1,
      mulSelect1,
      QueryBarCode1,
      searchClick1,
      onQueryBar1,
      fetchFromServer1,

      getSelectedString() {
        return batchselected.value.length === 0 ? '' : `${batchselected.value.length} record${batchselected.value.length > 1 ? 's' : ''} selected of ${batchrows.value.length}`;
      },
      initpagination: {
        sortBy: 'desc',
        descending: false,
        page: 2,
        rowsPerPage: 10
        // rowsNumber: xx if getting data from a server
      }
    };
  }
});
</script>
<style scoped>
</style>
